{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <h1 class="text-center mb-4">PDF发票信息提取器</h1>
    
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <form id="uploadForm">
                        <div class="mb-3">
                            <label for="pdfFiles" class="form-label">选择PDF文件（可多选）</label>
                            <input type="file" class="form-control" id="pdfFiles" name="files[]" multiple accept=".pdf" required>
                        </div>
                        <button type="submit" class="btn btn-primary">上传并提取信息</button>
                    </form>
                </div>
            </div>

            <div id="results" class="mt-4">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th scope="col">序号</th>
                                <th scope="col">文件名</th>
                                <th scope="col">发票号码</th>
                                <th scope="col">金额</th>
                            </tr>
                        </thead>
                        <tbody id="resultsBody">
                            <!-- 结果将在这里显示 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData();
    const fileInput = document.getElementById('pdfFiles');
    
    for (const file of fileInput.files) {
        formData.append('files[]', file);
    }

    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();
        displayResults(data);
    } catch (error) {
        console.error('Error:', error);
        alert('上传文件时发生错误');
    }
});

function displayResults(results) {
    const resultsBody = document.getElementById('resultsBody');
    resultsBody.innerHTML = '';

    results.forEach((result, index) => {
        const row = document.createElement('tr');
        
        // 如果有错误，显示错误信息
        if (result.error) {
            row.innerHTML = `
                <td>${index + 1}</td>
                <td>${result.filename}</td>
                <td colspan="2" class="text-danger">${result.error}</td>
            `;
        } else {
            row.innerHTML = `
                <td>${index + 1}</td>
                <td>${result.filename}</td>
                <td>${result.invoice_number}</td>
                <td>${result.amount}</td>
            `;
        }
        
        resultsBody.appendChild(row);
    });
}
</script>

<style>
.table {
    background-color: white;
}
.table th {
    white-space: nowrap;
}
.table td {
    vertical-align: middle;
}
</style>
{% endblock %} 